<template lang="html">
  <div class="loading_index_price">
    <div class="price-user">
      <div class="wrapper">
        <h3 class="title">用户可免费注册账号，新用户注册</h3>
        <div class="package">
          <i class="icon-package"></i>
          <span class="info">赠送20算力</span>
        </div>
        <div class="storage">
          <i class="icon-storage"></i>
          <span class="info">赠送200GB存储</span>
        </div>
        <el-button v-if="userInfo && userInfo.token" class="link" type="primary" round @click="toSignup">
        进入系统</el-button>
        <el-button v-else class="link" type="primary" round @click="toSignup">免费体验</el-button>
        <p class="explain">* 当前是内测阶段，新用户注册后，需要审核通过才可以使用 </p>
      </div>
    </div>
    <div class="price-standard">
      <div class="wrapper">
        <h3 class="title">收费标准</h3>
        <p class="desc">* 标准账户提交任务时，按不同的GPU卡进行不同的计时收费标准</p>
        <ul class="tolls">
          <li class="item">
            <i class="icon-toll"></i>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">GPU：</span>
              <span class="type-con">GTX 1080Ti</span>
            </div>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">CPU：</span>
              <span class="type-con">2 vCPUs</span>
            </div>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">内存：</span>
              <span class="type-con">16 GB</span>
            </div>
            <i class="lines"></i>
            <div class="price-detail">
              <span class="sym">￥</span>
              <span class="num">0.7</span>
              <span class="unit">算力</span>
              <span class="time">/小时</span>
            </div>
          </li>
          <li class="item">
            <i class="icon-toll icon-toll2"></i>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">GPU：</span>
              <span class="type-con">TITAN Xp</span>
            </div>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">CPU：</span>
              <span class="type-con">2 vCPUs</span>
            </div>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">内存：</span>
              <span class="type-con">16 GB</span>
            </div>
            <i class="lines"></i>
            <div class="price-detail">
              <span class="sym">￥</span>
              <span class="num">1</span>
              <span class="unit">算力</span>
              <span class="time">/小时</span>
            </div>
          </li>
          <li class="item">
            <i class="icon-toll icon-toll3"></i>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">GPU：</span>
              <span class="type-con">Tesla V100</span>
            </div>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">CPU：</span>
              <span class="type-con">2 vCPUs</span>
            </div>
            <div class="type">
              <i class="icon-toll-type"></i>
              <span class="type-name">内存：</span>
              <span class="type-con">32 GB</span>
            </div>
            <i class="lines"></i>
            <div class="price-detail">
              <span class="sym">￥</span>
              <span class="num">9</span>
              <span class="unit">算力</span>
              <span class="time">/小时</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="price-enter">
      <div class="wrapper">
        <h3 class="title">企业用户</h3>
        <p class="desc">如果您是企业用户可以与我们联系，为您提供更多个性化需求</p>
        <div class="contact">
          <i class="icon-contact icon-contact-phone"></i>
          <span class="contact-info">电话：0551-65708115</span>
        </div>
        <div class="contact">
          <i class="icon-contact icon-contact-email"></i>
          <span class="contact-info">邮箱：bitahub@leinao.ai</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  methods: {
    // 去注册
    toSignup () {
      if (this.userInfo && this.userInfo.token) {
        this.$router.push({ path: '/project/list' })
      } else {
        this.$router.push({ path: '/login' })
        // window.open(`${process.env.VUE_APP_BITA_REGISTER}`)
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  }
}
</script>

<style lang="stylus" scoped>
.loading_index_price
  width 100%
  .price-user
    width 100%
    padding-top 28px
    background #fff
    .wrapper
      width 1100px
      height 510px
      margin 0 auto
      background url(../../common/image/icon-price-user.png) no-repeat right top
      background-size 1024px 404px
      .title
        padding 50px 0 72px 0
        line-height 42px
        font-size 36px
        color #263F57
        font-weight 600
      .package
        height 50px
        padding-left 12px
        font-size 0
        .icon-package
          display inline-block
          width 16px
          height 30px
          background url(../../common/image/icon-price-package.png) no-repeat center
          background-size 100%
          vertical-align top
        .info
          display inline-block
          height 30px
          padding-left 18px
          line-height 30px
          font-size 20px
          color #2D323B
          font-weight 600
      .storage
        height 30px
        padding-left 12px
        font-size 0
        .icon-storage
          display inline-block
          width 16px
          height 30px
          background url(../../common/image/icon-price-storage.png) no-repeat center
          background-size 100%
          vertical-align top
        .info
          display inline-block
          height 30px
          padding-left 18px
          line-height 30px
          font-size 20px
          color #2D323B
          font-weight 600
      .link
        width 224px
        padding-top 18px
        padding-bottom 18px
        margin-top 56px
        margin-bottom 28px
        font-size 20px
        color #fff
        border-radius 28px
        user-select none
      .explain
        line-height 20px
        font-size 14px
        color #FF8A29
  .price-standard
    width 100%
    height 600px
    background url(../../common/image/icon-price-standard.png) no-repeat center
    background-size 1920px 600px
    .wrapper
      width 1100px
      margin 0 auto
      .title
        padding 78px 0 16px 0
        line-height 60px
        font-size 38px
        color #FFFFFF
        text-align center
      .desc
        padding-bottom 88px
        line-height 28px
        font-size 20px
        color #FFFFFF
        text-align center
      .tolls
        display flex
        width 100%
        justify-content space-between
        .item
          width 308px
          height 424px
          padding-top 48px
          background #ffffff
          box-shadow 0 2px 11px 4px rgba(74,105,194,0.19)
          border-radius 5px
          .icon-toll
            display block
            width 90px
            height 96px
            margin 0 auto
            margin-bottom 36px
            background url(../../common/image/icon-toll1.png) no-repeat center
            background-size 100%
          .icon-toll2
            background url(../../common/image/icon-toll2.png) no-repeat center
            background-size 100%
          .icon-toll3
            background url(../../common/image/icon-toll3.png) no-repeat center
            background-size 100%
          .type
            padding-left 78px
            padding-bottom 8px
            font-size 0
            .icon-toll-type
              display inline-block
              width 16px
              height 24px
              background url(../../common/image/icon-toll-type.png) no-repeat center
              background-size 100%
              vertical-align top
            .type-name, .type-con
              display inline-block
              height 24px
              line-height 24px
              padding-left 10px
              font-size 18px
              color:#4A4A4A
            .type-con
              padding-left 0
          .lines
            display block
            width 120px
            height 3px
            background #FFBB41
            margin 42px auto 20px auto
          .price-detail
            height 38px
            text-align center
            font-size 0
            .sym
              display inline-block
              width 18px
              padding-right 6px
              font-size 18px
              color #FB537E
              vertical-align top
            .num
              display inline-block
              line-height 38px
              font-size 32px
              color #FB537E
              font-weight bold
              vertical-align top
            .unit
              display inline-block
              line-height 38px
              font-size 26px
              color #FB537E
              font-weight bold
              vertical-align top
            .time
              display inline-block
              padding-top 10px
              font-size 16px
              color #FB537E
              line-height 30px
              vertical-align top
  .price-enter
    width 100%
    padding 330px 0 80px 0
    .wrapper
      width 1100px
      height 390px
      margin 0 auto
      background url(../../common/image/icon-price-enter.png) no-repeat right 26px
      background-size 536px 364px
      .title
        padding-bottom 20px
        line-height 42px
        font-size 32px
        color #2D323B
        font-weight bold
      .desc
        padding-bottom 72px
        line-height 28px
        font-size 18px
        color #2D323B
      .contact
        padding-bottom 10px
        font-size 0
        .icon-contact
          display inline-block
          width 36px
          height 36px
          vertical-align top
        .icon-contact-phone
          background url(../../common/image/icon-contact-phone.png) no-repeat center
          background-size 34px 29px
        .icon-contact-email
          background url(../../common/image/icon-contact-email.png) no-repeat center
          background-size 30px 24px
        .contact-info
          padding-left 24px
          line-height 36px
          font-size 16px
          color #2D323B
@media screen and (min-width: 1920px)
  .loading_index_price
    .price-standard
      background url(../../common/image/icon-price-standard.png) no-repeat center
      background-size 100%
</style>
